<template>
    <div class="write-wrapper" v-if="model">
        <el-form :model="model" ref="formRef" label-width="80px" :inline="false" :disabled="true">
            <el-form-item label="主题：">
                <el-input v-model="model.subject" />
            </el-form-item>
            <el-form-item label="发件人：">
                <el-input v-model="sender.account" />
            </el-form-item>
            <el-form-item label="收件人：">
                <el-select v-model="model.audienceId" multiple filterable remote reserve-keyword placeholder="请选择收件人"
                    :remote-method="remoteMethod" :loading="selectLoading">
                    <el-option v-for="item in accountOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>

        <div class="editor-box">
            <!-- 编辑器（WangEditor） -->
            <Editor class="editor-body" v-model="model.body" :defaultConfig="editorConfig" :mode="mode"
                @onCreated="onEditorCreated" />
        </div>
    </div>

    <el-empty v-else description="暂无数据">

    </el-empty>

</template>

<script setup>
import { Editor } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'
import { listEmailAccount } from "@/api/msg/emailaccount.js";
const { proxy } = getCurrentInstance()

// 标题
const formRef = ref();
const selectLoading = ref(false);
const accountOptions = ref([]);
// 富文本内容
const editorRef = shallowRef();
const mode = "default"
const editorConfig = {
    placeholder: '请输入正文...',
    readOnly: true,
    // 你也可以在这里配置菜单栏、上传图片等更多内容
}

const props = defineProps({
    model: {
        type: Object,
        default: undefined,
    }
})

const sender = computed(() => {
    return props.model.sender || {};
})

watch(() => props.model, (newValue, oldValue) => {
    if (newValue?.id != oldValue?.id) {
        const p = { pageSize: 999, id: newValue.audienceId }
        resetAccountOptions(p)
    }
}, { deep: true })


// 当编辑器创建完成时，会触发 onCreated 回调
const onEditorCreated = (editorInstance) => {
    editorRef.value = editorInstance
    // 可以在此执行一些初始化操作，如加载草稿内容等
}


const remoteMethod = (query) => {
    resetAccountOptions({ account: query })
}

//获取账号选项数据
const resetAccountOptions = (params) => {
    selectLoading.value = true;
    return listEmailAccount(params).then(({ result }) => {
        accountOptions.value = result.map(s => ({ label: s.account, value: s.id }))
    }).finally(() => {
        selectLoading.value = false;
    })
}


// 组件卸载时，需手动销毁 editor 实例，避免内存泄漏
onUnmounted(() => {
    if (editorRef.value) {
        editorRef.value.destroy()
        editorRef.value = null
    }
})
</script>

<style scoped lang="scss">
.sent-success {
    height: 100%;
    display: flex;
    justify-content: center;
}

.write-wrapper {
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 0;
}

.editor-box {
    border: 1px solid #ccc;
    margin-bottom: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .editor-tool {
        border: 1px solid #ccc;
        padding: 0 8px
    }

    .editor-body {
        flex: 1;
        overflow-y: auto;
    }
}

.title-input {
    margin-bottom: 16px;
}

.editor-container {
    margin-bottom: 16px;
}

.btn-group {
    // margin-bottom: 16px;
    text-align: right;
}

.preview-container {
    margin-top: 16px;
}
</style>